<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    @include('common-css')
    <style>
        .input_box {
            width: 100%;
            height: 40px;
            margin-top: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .input_label {
            width: 120px;
            box-sizing: border-box;
        }

        .project-table {
            margin-top: 15px;
        }

        .status-tag {
            color: #1890ff;
            border: 1px solid #91d5ff;
            border-radius: 3px;
            background: #e6f7ff;
            font-size: 12px;
            padding: 2px 3px;
        }

        .ant-table-tbody > tr > td, .ant-table-thead > tr > th {
            vertical-align: middle;
            line-height: 25px;
        }

        .search_box {
            width: 1000px;
        }

        .search_box input {
            width: 300px;
        }

        .search_box button {
            margin-left: 20px;
        }

        .search_box .ant-select {
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div id="app"></div>

<script id="appTemplate" type="x-template">
    <a-locale-provider :locale="antdLocale">
        <div class="container">

            @include('admin.header-tpl')

            <main>
                <div class="common_container">

                    @include('admin.aside-tpl')

                    <div class="common_content admin_common_content">
                        @if(isset($userMenusKeyData[63]))
                            <template v-if="queryParams.aside_key.indexOf('形式审查-') === 0">
                                <template v-if="!isWorkflowPhasesLoaded">
                                    <p style="color: red">因无法加载工作流阶段数据，不能进行开启/关闭形式审查阶段操作</p>
                                </template>
                                <template v-else-if="atPhaseFormalReview">
                                    <a-button :disabled="!hasPhaseApplyEnded" type="primary"
                                              @click="changePhaseFormalReviewStatus(false)">关闭形式审查阶段</a-button>
                                    <a-tooltip>
                                        <template v-if="hasPhaseApplyEnded" slot="title">
                                            <p>若已完成形式审查工作，请关闭形式审查阶段</p>
                                            <br/>
                                            <p>关闭形式审查阶段后，申报者不能新建申报项目、修改项目材料或提交形式审查</p>
                                            <br/>
                                            <p>在提交项目至专家评审之前，必须先关闭形式审查阶段</p>
                                        </template>
                                        <template v-else="hasPhaseApplyEnded" slot="title">
                                            <p>若已完成形式审查工作，请先关闭项目申报阶段，再关闭形式审查阶段</p>
                                            <br/>
                                            <p>关闭形式审查阶段后，申报者不能新建申报项目、修改项目材料或提交形式审查</p>
                                            <br/>
                                            <p>在提交项目至专家评审之前，必须先关闭形式审查阶段</p>
                                        </template>
                                        <a-icon type="info-circle"/>
                                    </a-tooltip>
                                </template>
                                <template v-else>
                                    <a-button :disabled="hasPhaseExpertReviewOfAnyLargeGroupBegun" type="primary"
                                    @click="changePhaseFormalReviewStatus(true)">开启形式审查阶段</a-button>
                                    <a-tooltip>
                                        <template v-if="!hasPhaseExpertReviewOfAnyLargeGroupBegun" slot="title">
                                            <p>当前 形式审查阶段 已关闭，申报者不能新建申报项目，也不能修改已创建项目的资料并重新提交形式审查</p>
                                            <br/>
                                            <p>若要允许申报者新建申报项目，请先开启形式审查阶段，然后开启项目申报阶段</p>
                                            <br/>
                                            <p>若要仅允许申报者修改形式审查退回的项目并重新提交形式审查，但不允许申报者新建申报项目，请开启形式审查阶段</p>
                                        </template>
                                        <template v-else slot="title">
                                            <p>当前 网评阶段 已开始，申报者不能新建申报项目，也不能修改已创建项目的资料并重新提交形式审查</p>
                                        </template>
                                        <a-icon type="info-circle"/>
                                    </a-tooltip>
                                </template>
                            </template>
                        @endif


                        <template
                                v-if="queryParams.status_ids === 'B1' && {{isset($userMenusKeyData[83]) ? 'true' : 'false'}}">

                            <template v-if="!isWorkflowPhasesLoaded">
                                <p style="color: red">因无法加载工作流阶段数据，不能进行开启/关闭项目申报阶段操作</p>
                            </template>
                            <template v-else-if="atPhaseApply">
                                <a-button type="primary" @click="updateDeclarePhaseFlag">关闭项目申报阶段</a-button>
                                <a-tooltip>
                                    <template slot="title">
                                        <p>关闭项目申报阶段后，申报者的操作规则如下:</p>
                                        <p>1. 申报者不能新建申报项目</p>
                                        <p>2. 对于从未提交到形式审查的项目，申报者不能修改项目材料、提交形式审查</p>
                                        <p>3. 对于形式审查退回的项目，申报者可以修改项目材料，并重新提交形式审查</p>
                                        <br/>
                                        <p>关闭项目申报阶段后，只要尚未将项目提交给专家评审，你可以重新开启项目申报阶段</p>
                                    </template>
                                    <a-icon type="info-circle"/>
                                </a-tooltip>
                            </template>
                            <template v-else>
                                <a-button :disabled="hasPhaseFormalReviewEnded" type="primary"
                                          @click="updateDeclarePhaseFlag">开启项目申报阶段
                                </a-button>
                                <a-tooltip>
                                    <template v-if="!hasPhaseFormalReviewEnded" slot="title">
                                        <p>当前 项目申报阶段 已关闭，而 形式审查阶段 尚未结束，申报者的操作规则如下:</p>
                                        <p>1. 申报者不能新建申报项目</p>
                                        <p>2. 对于从未提交到形式审查的项目，申报者不能修改项目材料、提交形式审查</p>
                                        <p>3. 对于形式审查退回的项目，申报者可以修改项目材料，并重新提交形式审查</p>
                                        <br/>
                                        <p>若要解除以上第1、2条限制，请开启项目申报阶段</p>
                                    </template>
                                    <template v-else-if="!hasPhaseExpertReviewOfAnyLargeGroupBegun" slot="title">
                                        <p>当前 项目申报阶段 和 形式审查阶段 均已关闭，申报者不能新建申报项目，也不能修改已创建项目的资料并重新提交形式审查</p>
                                        <br/>
                                        <p>若要允许申报者新建申报项目，请先开启形式审查阶段，再开启项目申报阶段</p>
                                        <br/>
                                        <p>若要仅允许申报者修改形式审查退回的项目并重新提交形式审查，但不允许申报者新建申报项目，请开启形式审查阶段</p>
                                    </template>
                                    <template v-else slot="title">
                                        <p>当前 网评阶段 已开始，申报者不能新建申报项目，也不能修改已创建项目的资料并重新提交形式审查</p>
                                    </template>
                                    <a-icon type="info-circle"/>
                                </a-tooltip>
                            </template>
                        </template>

                        <!--2020-06-02@Excel 导出 弹窗@start-->
                        @switch($_GET['status_ids'])
                            @case('B1')
                            {{--        <a-button type="primary"--}}
                            {{--                  @click="showExcelDialog('导出填报中项目','list_project')"--}}
                            {{--                  style="margin-left: 12px">导出填报中项目</a-button>--}}
                            @break
                            @case('B2')
                            {{--        <a-button type="primary"--}}
                            {{--                  @click="showExcelDialog('导出待形式审查项目','list_project')"--}}
                            {{--                  style="margin-left: 12px">导出待形式审查项目</a-button>--}}

                            <a-button @click="showExcelDialog('导出通过形式审查','list_project')"
                                      style="margin-left: 12px;float: right">导出通过形式审查项目
                            </a-button>
                            @break
                            @case('B1.2')
                            {{--        <a-button type="primary"--}}
                            {{--                  @click="showExcelDialog('导出形式审查退回修改项目','list_project')"--}}
                            {{--                  style="margin-left: 12px">导出形式审查退回修改项目</a-button>--}}
                            @break
                            @default
                            {{--  移除  分配评审 --}}
                            {{--        @case('C1,C2')--}}
                            {{--        导出项目列表--}}
                            {{--        @break--}}

                            @break
                        @endswitch
                    <!--2020-06-02@Excel 导出 弹窗@end-->


                        @include('admin.table-projects')

                    </div>

                </div>
            </main>

            <a-modal
                    title="退回原因"
                    v-model="dialogRecallReasonVisible"
                    @ok="handleRecallReasonDialogOk"
                    @cancel="">
                <a-textarea v-model="recallReason" placeholder="请填写退回原因" :rows="4"></a-textarea>
            </a-modal>

            @include('admin.excel-export-tpl')

        </div>
    </a-locale-provider>
</script>

@include('admin.excel-export-js')
@include('common-js')

@include('admin.header-js')
@include('admin.aside-js')

<script>
    var queryParams = parseUrl(location.href).params;

    var projectTableColumns = [
        {
            width: 60,
            title: '序号',
            dataIndex: 'num'
        },
        {
            width: 150,
            title: '项目名称',
            dataIndex: 'project_name',
            scopedSlots: {
                customRender: 'project_name'
            }
        },
            @if (Request::get('award_id') == '1')
        {
            width: 100,
            title: '专业类别',
            dataIndex: 'prof_category',
            scopedSlots: {
                customRender: 'prof_category'
            }
        },
            @endif
        {
            width: 180,
            title: '申报者',
            dataIndex: 'applicant',
            scopedSlots: {
                customRender: 'applicant'
            }
        },

            @if (Request::get('status_ids') != 'B1')
        {
            width: 70,
            title: '申报书',
            dataIndex: 'application_form',
            scopedSlots: {
                customRender: 'application_form'
            }
        }, {
            width: 70,
            title: '附件',
            dataIndex: 'attachments',
            scopedSlots: {
                customRender: 'attachments'
            }
        },
            @endif

        {
            width: 120,
            title: '状态',
            dataIndex: 'status',
            scopedSlots: {
                customRender: 'status'
            }
        },
            @if (false)
        {
            width: 100,
            title: '待办事项',
            dataIndex: 'applicant_todo',
            scopedSlots: {
                customRender: 'todo'
            }
        },
            @endif
            @if ($_GET['status_ids'] == 'B2')
        {
            width: 200,
            title: '操作',
            key: 'operations',
            scopedSlots: {
                customRender: 'operations'
            }
        }
        @endif
    ];

    var awardsInfo = {!! json_encode(array_values(config('vars.awards')), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!};

</script>

<script>
    var app = new Vue({
        el: '#app',
        template: '#appTemplate',
        data: {
            searchKeyword: '',
            profCategoryFilter: '',
            formalReviewStatusFilter: '',

            //@start excel export
            ExcelExportParam: {
                type: 'list_project',
                award_id: queryParams.award_id,
                status_ids: queryParams.status_ids
            },
            //@end excel export

            workflowPhases: [],

            projectTableColumns,
            pageData: [],
            loadingPageData: false,

            dialogRecallReasonVisible: false,
            recallingProject: {},
            recallReason: '',

            queryParams,
            awardsInfo,
            profCategories,

            asideSelectedKeys: [queryParams.aside_key],
            antdLocale: antd.locales.zh_CN,
            ...AdminHeader.data,
            ...AdminAside.data,
            ...ExcelExport.data
        },
        computed: {
            filteredProjects() {
                var projects = this.searchFilteredProjects;
                if (this.profCategoryFilter) {
                    projects = projects.filter(project => project.prof_category === this.profCategoryFilter)
                }
                if (this.formalReviewStatusFilter) {
                    if (this.formalReviewStatusFilter === '等待形式审查') {
                        projects = projects.filter(project => project.status_id === 'B2')
                    } else if (this.formalReviewStatusFilter === '通过形式审查') {
                        projects = projects.filter(project => this.isProjectStatusIdOfFormalReviewPassed(project.status_id))
                    }
                }
                var num = 1;
                projects.forEach(project => {
                    project.num = num++
                });
                return projects
            },
            searchFilteredProjects() {
                var projects;
                if (this.searchKeyword) {
                    var q = this.searchKeyword.trim();
                    projects = this.pageData.filter(project => {
                        var text = project.project_name + project.applicant_name + project.applicant_org_name + project.applicant_tel + project.applicant_email;
                        return text.toLowerCase().indexOf(q) != -1
                    })
                } else {
                    projects = this.pageData
                }
                return projects
            },

            /**
             * 是否已加载工作流阶段数据
             *
             * @return boolean
             */
            isWorkflowPhasesLoaded() {
                return this.workflowPhases.length > 0
            },

            /**
             * 是否处于申报阶段
             *
             * @return boolean|null
             */
            atPhaseApply() {
                return this.atPhase('A', 0)
            },

            /**
             *
             * @return boolean|null
             */
            hasPhaseApplyEnded() {
                return this.hasPhaseEnded('A', 0)
            },

            /**
             * 是否处于形式审查阶段
             *
             * @return boolean|null
             */
            atPhaseFormalReview() {
                return this.atPhase('B', 0)
            },

            /**
             *
             * @return boolean|null
             */
            hasPhaseFormalReviewEnded() {
                return this.hasPhaseEnded('B', 0)
            },

            /**
             * 是否至少一个大组已开始专家评审阶段（即已提交项目至专家评审）
             */
            hasPhaseExpertReviewOfAnyLargeGroupBegun() {
                for (let phase of this.workflowPhases) {
                    if (phase.phase_id === 'D' && phase.has_begun === 1) {
                        return true
                    }
                }
                return false
            },
        },
        beforeMount() {
            this.loadAsideDefaultOpenKeys()
            this.loadWorkflowPhases()
        },
        mounted() {
            this.reloadPageData()
            this.reloadAsideData()
        },
        methods: {
            loadWorkflowPhases() {
                axios.get('/api/common/get-workflow-phases')
                    .then(response => {
                        if (response.data.ok) {
                            this.workflowPhases = response.data.phases
                        } else {
                            error("加载工作流阶段数据失败")
                        }
                    })
            },

            // 从 this.workflowPhases 中获取指定的阶段
            getWorkflowPhase(phaseId, largeGroupId) {
                for (let phase of this.workflowPhases) {
                    if (phase.phase_id === phaseId && phase.large_group_id === largeGroupId) {
                        return phase
                    }
                }
                return null
            },

            /**
             * 指定阶段是否已开始
             *
             * @return boolean|null
             */
            hasPhaseBegun(phaseId, largeGroupId) {
                let phase = this.getWorkflowPhase(phaseId, largeGroupId)
                if (phase === null) {
                    return null
                }
                return phase.has_begun === 1
            },

            /**
             * 是否正处于指定阶段中
             *
             * @return boolean|null
             */
            atPhase(phaseId, largeGroupId) {
                let phase = this.getWorkflowPhase(phaseId, largeGroupId)
                if (phase === null) {
                    return null
                }
                return phase.has_begun === 1 && phase.has_ended === 0
            },

            /**
             * 指定阶段是否已结束
             *
             * @return boolean|null
             */
            hasPhaseEnded(phaseId, largeGroupId) {
                let phase = this.getWorkflowPhase(phaseId, largeGroupId)
                if (phase === null) {
                    return null
                }
                return phase.has_ended === 1
            },


            changePhaseFormalReviewStatus(open = false) {
                loading('正在执行...')
                axios.post('/api/admin/end-phase-formal-review', {
                    isOpen: open
                }).then(response => {
                    dismiss()
                    if (response.data.ok) {
                        success('操作成功');
                        this.loadWorkflowPhases()
                    } else {
                        error('操作失败')
                    }
                })
            },

            // 判断某个项目状态ID，是否代表该项目通过了形式审查
            isProjectStatusIdOfFormalReviewPassed(statusId) {
                return ['B1', 'B1.2', 'B2', 'B3'].indexOf(statusId) === -1;
            },

            countProjectsByProfCategory(category) {
                var projects = this.searchFilteredProjects;
                if (category == '') {
                    return projects.length
                }
                var count = 0;
                projects.forEach(project => {
                    if (project.prof_category == category) {
                        count += 1
                    }
                });
                return count
            },
            countProjectsByFormalReviewStatus(formalReviewStatus) {
                let count = 0
                switch (formalReviewStatus) {
                    case '':
                        count = this.searchFilteredProjects.length
                        break
                    case '通过形式审查':
                        this.searchFilteredProjects.forEach(project => {
                            if (this.isProjectStatusIdOfFormalReviewPassed(project.status_id)) {
                                count++
                            }
                        })
                        break
                    case '等待形式审查':
                        this.searchFilteredProjects.forEach(project => {
                            if (project.status_id == 'B2') {
                                count++
                            }
                        })
                        break
                    default:
                }
                return count
            },
            handleProfCategoryChange(record, value) {
                console.log('handleProfCategoryChange', record, value);
                axios.post('/api/admin/update-project-attrs', {
                    project_id: record.id,
                    attrs: {
                        prof_category: value
                    }
                }).then(response => {
                    success('修改成功')
                })
            },
            reloadPageData1() {
                this.loadingPageData = true;
                axios.get('/api/admin/get-projects', {
                    params: {
                        award_id: queryParams.award_id,
                        status_ids: queryParams.status_ids,
                        large_group_id: queryParams.large_group_id,
                    }
                }).then(response => {
                    this.pageData = response.data;
                    this.loadingPageData = false
                })
            },
            reloadPageData() {
                this.loadingPageData = true;

                let status_ids = queryParams.status_ids
                //形式审查时 现实状态
                if (queryParams.status_ids == 'B2') {
                    status_ids = 'B2,C1,C2,D1,D2,D3,E1,E2,E3,F1,F2,F3,G1,G2,G3,H1,I1,J1'
                }

                axios.get('/api/admin/get-list-projects-page-data', {
                    params: {
                        award_id: queryParams.award_id,
                        status_ids: status_ids,
                        large_group_id: queryParams.large_group_id,
                    }
                }).then(response => {
                    if (response.data.ok) {
                        this.pageData = response.data.projects
                    } else {
                        error('加载页面数据失败: ' + response.data.msg)
                    }
                    this.loadingPageData = false
                })
            },
            showRecallReasonDialog(project) {
                this.recallingProject = project;
                this.recallReason = '';
                this.dialogRecallReasonVisible = true
            },
            handleRecallReasonDialogOk() {
                if (this.recallReason == '') {
                    warn('退回原因不能为空');
                    return
                }
                this.updateProjectStatus(this.recallingProject, 'B1.2', this.recallReason);
                this.dialogRecallReasonVisible = false
            },
            updateProjectStatus(project, statusId, statusRemarks) {
                console.log('updateProjectStatus', project, statusId, statusRemarks);
                loading('正在处理，请稍候');
                var postData = {
                    project_id: project.id,
                    status_id: statusId,
                };
                if (statusRemarks) {
                    postData.status_remarks = statusRemarks
                }
                axios.post('/api/admin/update-project-status', postData)
                    .then(response => {
                        dismiss();
                        success('操作成功');
                        this.reloadPageData();
                        this.reloadAsideData()
                    })
            },
            projectFormalReviewPassed(projectId) {
                loading('正在处理，请稍候');
                axios.post('/api/admin/project-formal-review-passed', {project_id: projectId})
                    .then(response => {
                        dismiss();
                        if (response.data.ok) {
                            success('操作成功');
                            this.reloadPageData();
                            this.reloadAsideData()
                        } else {
                            error('操作失败: ' + response.data.msg)
                        }
                    })
            },
            findAwardInfoById(id) {
                return this.awardsInfo.filter(item => {
                    return item.id == id
                })[0]
            },

            // 开启/结束 申报阶段
            updateDeclarePhaseFlag() {
                loading('正在处理，请稍候');
                axios.post('/api/admin/update-declare-phase')
                    .then(response => {
                        dismiss();
                        if (response.data.ok) {
                            success(response.data.msg);
                            this.loadWorkflowPhases()
                        } else {
                            error(response.data.msg)
                        }
                    })
            },

            ...AdminHeader.methods,
            ...AdminAside.methods,
            ...ExcelExport.methods
        }
    })
</script>

</body>
</html>